<template>
	<div class="search">
		<search-bar :ph='Ph' @searchBar='setlocal' @sbInput='setInput' ></search-bar>
		<hot-search :hotsname='hotsName' :list='hots' v-show='!show' ></hot-search>
		<hist-list :list='locals' v-show='!show' ></hist-list>
		<srh-rsult v-show="show" :result="Result" ></srh-rsult>
		
		
	</div>
</template>

<script>
	import searchBar from '@/components/searchBar'
	import hotSearch from '@/components/hotSearch'
	import api from '@/api'
	import axios from 'axios'
	import histList from '@/components/histList'
	import srhRsult from '@/components/srhRsult'
	
	export default{
		name:'search',
		components:{
			searchBar,
			hotSearch,
			histList,
			srhRsult
			
		},
		data(){
			return {
				Ph:'搜索歌曲、歌手、专辑',
				hots:'',
				hotsName:'热门搜索',
				locals:[],
				Result:'',
				show:false
			}
		},
		mounted(){
			axios.get(api.searchhot).then((res)=>{
//				console.log(res.data.result.hots)
				this.hots=res.data.result.hots;
//				console.log(this.hots)
				
			})
			if(localStorage.getItem('locals')){
				var arr = localStorage.getItem('locals').split(',');
//				console.log(arr);
				arr.forEach((el,index)=>{
//					console.log(el)
					this.locals.push(el);
				})
//				this.locals.push(arr);
			}
			
		},
		activated(){
			this.$store.commit('hiddentHead',{
						hiddentHead:false
					})
		},
		methods:{
			setlocal(e){
				this.locals.push(e);
				localStorage.setItem('locals',this.locals);
//				console.log(localStorage.getItem('locals'));
				
			},
			setInput(e){
				this.Result=e;
//				console.log(e)
				if(e!=''){
					this.show=true;
				}else if(e==''){
					this.show=false
				}
			}
		}
	}
</script>

<style lang="scss">
@import '../scss/common';
@import '../scss/reset';

.search{
	margin-top: r(208px);
}

</style>